<!-- testing/Inf.vue -->
<template>
  <div>
    <div v-infinite-scroll="loadmore"
          infinite-scroll-distance="40"
          infinite-scroll-disabled="busy">
      <p v-for="(item, i) in n" :key="i">段落:{{i}}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      busy: false,
      n : 10
    }
  },
  methods: {
    loadmore(){
      console.log('loadmore...');
      // 模拟发请求，3秒后获取结果，更新列表
      this.busy = true;  // 忙着呢，使无限滚动失效
      window.setTimeout(()=>{
        this.n += 10;
        this.busy = false; // 不忙了，使无限滚动重新生效
      }, 3000);
    }
  }
}
</script>
<style scoped>
p {
  height: 40px; line-height: 40px; text-align: center;
  border-bottom: 1px solid black;
}
</style>